<template>
    <header>
        <div class="logo">
            <img src="~@/assets/images/tzy-logo.png" alt="" />
            <span>{{ systemName }}</span>
        </div>
        <div class="user">
            <a-badge :count="count" :overflow-count="99">
                <img
                    @click="toMessage"
                    src="~@/assets/images/login/notfiy.png"
                    alt=""
                />
                <img
                    @click="toMessage"
                    src="~@/assets/images/login/notfiy_hover.png"
                    alt=""
                />
            </a-badge>
            <a-dropdown :trigger="['click']">
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                    <span class="name">{{ name }}</span>
                    <a-icon type="caret-down" />
                </a>
                <a-menu slot="overlay" @click="menuClick">
                    <a-menu-item key="resetPwd">修改密码</a-menu-item>
                    <a-menu-item key="logOut">退出登录</a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
        <a-modal
            title="重置密码"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <a-form-model ref="ruleForm" :model="form" :rules="rules">
                <a-form-model-item label="新密码" prop="newPassword">
                    <a-input
                        v-model="form.newPassword"
                        type="password"
                        @keyup.enter.native="handleOk"
                    ></a-input>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </header>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { localStorage } from '~/plugins/tools'
export default {
    name: 'MyHeader',
    data () {
        const checkPassword = (value) => {
            const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
            return reg.test(value)
        }
        const customCheckPassword = (rule, value, callback) => {
            if (!checkPassword(value)) {
                callback(new Error('请设置6~12位数字字母组合新密码'))
            } else {
                callback()
            }
        }
        return {
            visible: false,
            confirmLoading: false,
            form: {
                newPassword: ''
            },
            rules: {
                newPassword: [
                    {
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    { validator: customCheckPassword, trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapState('user', ['userInfo']),
        ...mapState('global', ['count']),
        orgCategoryId () {
            if (this.userInfo && this.userInfo.orgCategoryId) {
                return this.userInfo.orgCategoryId
            } else {
                return '0'
            }
        },
        systemName () {
            const roleType = Number(this.orgCategoryId)
            switch (roleType) {
            case 1:
                return '天作云超级管理员工作台'
            case 2:
                return '天作云运营管理员工作台'
            case 3:
                return '天作云运营人员工作台'
            case 4:
                return '天作云服务商工作台'
            case 5:
                return '天作云投资商工作台'
            default:
                return '天作云服务商工作台'
            }
        },
        name () {
            if (this.userInfo && this.userInfo.name) {
                return this.userInfo.name
            } else {
                return '用户'
            }
        }
    },
    mounted () {
        this.getTable()
    },
    methods: {
        ...mapActions('global', ['SetCount']),
        async getTable () {
            const res = await this.$ApiServer['message/list']({
                currentPage: 1,
                pageSize: 10,
                userId: localStorage.getItem('userInfo').id,
                // orgCategoryId: localStorage.getItem('userInfo').orgCategoryId,
                type: 1
            })
            if (res.code === 200) {
                this.SetCount(res.data.data.count)
            } else {
                this.$message.error(res.message)
            }
        },
        menuClick ({ key }) {
            if (key === 'resetPwd') {
                this.resetPassword()
            }
            if (key === 'logOut') {
                this.logout()
                this.$message.success('已成功退出登录')
            }
        },
        handleOk () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.confirmLoading = true
                    const res = await this.$ApiServer[
                        'personnel/reset/password'
                    ]({
                        userId: this.$store.state.user.userInfo.id,
                        newPassword: this.form.newPassword
                    })
                    if (res.code === 200) {
                        this.$message.success('修改成功，请重新登录')
                        this.visible = false
                        this.confirmLoading = false
                        setTimeout(() => {
                            this.logout()
                        }, 500)
                    } else {
                        this.confirmLoading = false
                        this.$message.error(res.message)
                    }
                }
            })
        },
        handleCancel () {
            this.$refs.ruleForm.resetFields()
            this.visible = false
        },
        resetPassword () {
            this.visible = true
        },
        toMessage () {
            const { companyInfoState, companyState } =
                this.$store.state.user.userInfo
            if (companyInfoState && companyState) {
                this.$router.push('/message-center')
            } else {
                this.$router.push('/message-center/indexn')
            }
        },
        logout () {
            this.$store.dispatch('user/logout')
        }
    }
}
</script>

<style lang="less" scoped>
header {
    width: 100%;
    height: 60px;
    padding: 0 40px 0 74px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    box-shadow: 0px 0px 1px rgba(153, 153, 153, 0.65);
    .logo {
        img {
            width: 43px;
            height: 41px;
        }
        span {
            font-size: 16px;
            margin-left: 74px;
            color: #2A2A2A;
        }
    }
    .user {
        display: flex;
        align-items: center;
        .ant-badge {
            &:hover{
               img:nth-child(1){
                 display: none;
               }
               img:nth-child(2){
                 display: block;
               }
            }
            img:nth-child(1) {
                width: 15px;
                height: 16px;
                display: block;
                cursor: pointer;

            }
            img:nth-child(2) {
                width: 15px;
                height: 16px;
                display: none;
                cursor: pointer;
            }
        }
        .ant-dropdown-link {
            margin: 0 20px;
            color: #999999;
            .name {
                font-size: 14px;
                color: #2A2A2A;
                font-weight: 500;
            }
        }
    }
}
::v-deep{
  .ant-badge-count{
    height: 14px;
    line-height: 14px;
    min-width: 20px;
    background: @primary-color;
  }
}
</style>
